<!DOCTYPE html>
<html >
<head>

		<style type="text/css">
			@import "../../../../dijit/themes/claro/claro.css";
		</style>
<script src="../../../../dojo/dojo.js" data-dojo-config='parseOnLoad: true, mvc: {debugBindings: true}'></script><script>var searchRecords;
	
	
</script>
<script>
/* BEGIN .. js :: Things in this section have to be two tabs in */

			require([
				"dojo/parser",
				"dojo/_base/json",
				"dijit/form/Textarea",
				"dojox/mvc/Generate"
			], function(parser){
				parser.parse();
			});

/* END .. js :: */
</script>
</head>
<body class="claro">
<!--  BEGIN .. html :: THINGS IN HERE START TWO TABS IN -->	


		<script type="dojo/require">at: "dojox/mvc/at"</script>
		<div id="wrapper">
			<div id="header">
				<div id="navigation"></div>
				<div id="headerInsert">
				<h1>View generation example</h1>
				<h2>Data Binding - Generate Container.</h2>
			</div>
		</div>
		<div id="main">
			<div id="leftNav"></div>
			<div id="mainContent">
				<h3>Model</h3>
				<div class="row">
					<textarea id="textarea" class="cell" data-dojo-type="dijit/form/Textarea">
		{
			Serial: "360324",
			First: "John",
			Last: "Doe",
			Email: "jdoe@example.com",
			Address: {
				Street: "123 Valley Rd",
				City: "Katonah",
				State: "NY",
				Zip: "10536"
			},
			Phones: [
				{
					Areacode: "111",
					Local: "111-1111"
				},{
					Areacode: "222",
					Local: "222-2222"
				}
			],
			Member: {
				Since: "2010",
				Type: "Gold"
			}
		}
					</textarea>
				</div>
				<h3>Generated View</h3>
				<div data-dojo-type="dojox/mvc/Generate"
				 data-dojo-props="children: at('widget:textarea', 'value').direction(at.from).transform({format: dojo.fromJson}), idNameMapping: {String: 'view_t'}"></div>
			</div>
		</div>
		</div>

		<p>In the above example, the Generate will create a view with a label and TextBox for each of the fields listed in the textarea, and any updates to the textarea will be cause the view to be updated when you tab out of the text area.</p>

<!--  END .. html :: THINGS IN HERE START TWO TABS IN -->	
</body>
</html>
